<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理系统</title>
    <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="./css/bootstrap.min.css"></link>
     <script src="./js/jquery.js"></script>
     <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
    <!-- tou 标题 -->
     <div class="row">
         <div class="col-md-12">
             <h1 class="text-center">商品管理系统</h1>
         </div>
     </div>
     <!-- search 搜索-->
     <div class="row" > 
        <div class="form-row col-md-8">
            <div class="col">
            <input type="text" class="form-control" placeholder="商品名称" id="bookName">
            </div>
        </div>
        <div class="col-md-4">
            <button type="button" class="btn btn-primary" onclick="searchBook()">搜索</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addBook" onclick="addProduct()">添加</button> 
        </div>

     </div>
     <!-- table 表格 -->
      <div class="row"> 
        <div class="col-md-12"> 
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">编号</th>
                        <th scope="col">商品名</th>
                        <th scope="col">商品价格</th>
                        <th scope="col">商品库存</th>
                        <th scope="col">商品图片</th>
                        <th scope="col">商品状态</th>
                        <th scope="col">商品类型</th>
                        <th scope="col">商品描述</th>
                        <th scope="col">创建时间</th>
                        <th scope="col">修改时间</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
     </div>
    <!-- 新增模态框 -->
    <div class="modal fade" id="addBook" tabindex="-1" role="dialog" aria-labelledby="addBookLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBookLabel">新增商品</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="bookName">商品名</label>
                        <input type="text" class="form-control" id="AddName"/>
                    </div>
                    <div class="form-group">
                        <label for="bookType">商品类型</label>
                        <select class="form-control" id="addType">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="author">商品价格</label>
                        <input type="text" class="form-control" id="addPrice"/>
                    </div>
                    <div class="form-group">
                        <label for="price">商品库存</label>
                        <input type="text" class="form-control" id="addStock"/>
                    </div>
                    <div class="form-group">
                        <label for="bookType">商品图片</label>
                        <input type="file" class="form-control" id="addImg">
                    </div>
                    <div class="form-group">
                        <label for="publishDate">商品状态</label>
                        <select class="form-control" id="addStatus">
                            <option value="0">请选择</option>
                            <option value="active">上架</option>
                            <option value="inactive">下架</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">商品描述</label>
                        <input type="text" class="form-control" id="addDesc"/>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">创建时间</label>
                        <input type="text" class="form-control" id="addCreateTime" readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">修改时间</label>
                        <input type="text" class="form-control" id="addUpdateTime" readonly="readonly"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addProduct()">保存</button>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 修改模态框 -->
     <div class="modal fade" id="updateBook" tabindex="-1" role="dialog" aria-labelledby="updateBookLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateBookLabel">修改商品</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group"> 
                        <label for="bookId">编号</label>
                        <input type="text" class="form-control" id="editbookId" readonly="readonly" disabled="disabled"/>
                    </div>
                    <div class="form-group"> 
                        <label for="bookName">商品名</label>
                        <input type="text" class="form-control" id="editName"/>
                    </div>
                    <div class="form-group"> 
                        <label for="bookType">商品类型</label>
                        <select class="form-control" id="editType">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="author">商品价格</label>
                        <input type="text" class="form-control" id="editPrice"/>
                    </div>
                    <div class="form-group">
                        <label for="price">商品库存</label>
                        <input type="text" class="form-control" id="editStock"/>
                    </div>
                    <div class="form-group">
                        <label for="bookType">商品图片</label>
                        <input type="file" class="form-control" id="editImg">
                    </div>
                    <div class="form-group">
                        <label for="publishDate">商品状态</label>
                        <select class="form-control" id="editStatus">
                            <option value="0">请选择</option>
                            <option value="active">上架</option>
                            <option value="inactive">下架</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">商品描述</label>
                        <input type="text" class="form-control" id="editDesc"/>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">创建时间</label>
                        <input type="text" class="form-control" id="editCreateTime" readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label for="publishDate">修改时间</label>
                        <input type="text" class="form-control" id="editUpdateTime" readonly="readonly"/>
                    </div>
                </div> 
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateBook()">保存</button> 
                </div>   
            </div>
        </div>
     </div>
</body>
</html>
<script>
    //页面加载完成获取数据
    $(function(){
        getList('');
        getType();
    })
    //获取商品类型
    function getType(){
        $.ajax({
            url:"http://127.0.0.1:8080/productTypes/getAllProductTypes",
            type:"get",
            dataType:"json", 
            success:function(data){
                console.log(data);
                if(data !=null){
                    for(const type of data){
                        //添加数据
                        $('#editType').append(`<option value="${type.typeId}">${type.typeName}</option>`)
                        $('#addType').append(`<option value="${type.typeId}">${type.typeName}</option>`)
                    }
                }
            }
        })
        
    }

    //获取商品列表
    function getList(name){
        let productParam={name};
        $.ajax({
            url:"http://127.0.0.1:8080/product/getProductList",
            data:JSON.stringify(productParam),
            type:"post",
            contentType:"application/json",
            dataType:"json", 
            success:function(data){
                console.log(data);
                if(data !=null){
                    //清空表格
                    $("tbody").empty();
                    for(const book of data){
                        let tr= $(`<tr>
                            <th scope="row">${productParam.productId}</th>
                            <td>${productParam.productName}</td>
                            <td>${productParam.productTypes}</td>
                            <td>${productParam.price}</td>
                            <td>${productParam.stock}</td>
                            <td>${productParam.imgUrl}</td>
                            <td>${productParam.status}</td>
                            <td>${productParam.description}</td>
                            <td>${productParam.createdAt}</td>
                            <td>${productParam.updatedAt}</td>
                            <td>
                                <button type="button" class="btn btn-primary" 
                                data-toggle="modal" data-target="#updateBook" onclick="detail(${productParam.productId})">修改</button>
                                <button type="button" class="btn btn-danger">删除</button>
                            </td>
                        </tr>`);
                        //将tr添加到tbody中
                        $("tbody").append(tr);
                    }
                }
            }
        })
    }
    
    //添加商品
    function addProduct(){
        let productName=$('#addName').val();
        let productType=$('#addType').val();
        let price=$('#addPrice').val();
        let stock=$('#addStock').val();
        let imgUrl=$('#addImgUrl').val();
        let status=$('#addStatus').val();
        let desc=$('#addDesc').val();
        let createTime=$('#addCreateTime').val();
        let updateTime=$('#addUpdateTime').val();
        let productParam={productName,productType,price,stock,imgUrl,status,desc,createTime,updateTime};
        console.log(productParam);
        $.ajax({
            url:"http://127.0.0.1:8080/product/add",
            data:JSON.stringify(productParam),
            type:"post",
            contentType:"application/json",
            dataType:"text", 
            success:function(data){
                if(data ="success"){
                    alert("新增成功");
                    //关闭模态框
                    $('#addBook').modal('hide');
                    //刷新表格
                    getBookList('','');
                    clearProduct();
                }else{
                    alert("新增失败");
                }
            }
        })
    }
    function clearProduct(){ 
        $('#addName').val('');
        $('#addType').val(0);
        $('#addPrice').val('');
        $('#addStock').val('');
        $('#addImgUrl').val('');
        $('#addStatus').val('');
        $('#addDesc').val('');
        $('#addCreateTime').val('');
        $('#addUpdateTime').val('');
    }
</script>